
{% extends "base/base_layout.html" %}
{% load static %}
{% block sidebar_option %}
    sidebar-collapse
{% endblock %}
{% block extra_css %}
 <!-- DataTables -->
<link rel="stylesheet" href="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.css" %}">
<style>
   #app_icon{
            width: 64px;
            height: 64px;
          }

   textarea {
 
  width: 100%;
  height: 500px;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
  border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
  border-image: none;
  border-radius: 6px 6px 6px 6px;
  border-style: none solid solid none;
  border-width: medium 1px 1px medium;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  color: #555555;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  padding: 5px 8px;
  transition: background-color 0.2s ease 0s;
}


textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;
}

/* Loading */

*.hidden {
  display: none !important;
}

div.loading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 16, 16, 0.5);
}

@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-ring-css {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
}
.uil-ring-css > div {
  position: absolute;
  display: block;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 80px;
  box-shadow: 0 6px 0 0 #ffffff;
  -ms-animation: uil-ring-anim 1s linear infinite;
  -moz-animation: uil-ring-anim 1s linear infinite;
  -webkit-animation: uil-ring-anim 1s linear infinite;
  -o-animation: uil-ring-anim 1s linear infinite;
  animation: uil-ring-anim 1s linear infinite;
}

/* disable button */
{% if not identifier %}
.btn {
    background-color: #7b7b7b;
    pointer-events: none;
    cursor: default;
}
{% endif %}
</style>
{% endblock %}
{% block content %}
<div class="content-wrapper">
  <div class="content-header">
  </div>
   <div class="container-fluid">


   <div class="row">
          {% if not identifier %}
          <div class="col-md-12">
            <div class="card bg-gradient-danger">
              <div class="card-header">
                <h3 class="card-title">Android Runtime not found!</h3>
                <!-- /.card-tools -->
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                 <p> MobSF cannot find android instance identifier. Make sure that an android instance is running and refresh this page.</p><p> If this error persists, Please set <i>ANALYZER_IDENTIFIER</i> in <strong>MobSF/settings.py or ~/.MobSF/config.py</strong>
                      </p>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          {% endif %}
          <div class="col-md-12">
            <div class="card bg-gradient-primary">
              <!-- /.card-header -->
              <div class="card-body">
                  <div class="row">
                     <div class="col-md-9">
                        <h4>Dynamic Analyzer Supports</h4>
                        <h5><strong>• Genymotion Android VM</strong> version 4.1 to 10.0 (x86, upto API 29)<br/><strong>• Android Studio Emulator AVD</strong> version 5.0 to 9.0 (arm, arm64, x86, and x86_64 upto API 28)<br/>We recommend using Android 7.0 and above.</h5>
                        <p>For Android versions less than <strong>5</strong>, we use Xposed Framework and therefore, you must MobSFy the Android Runtime prior to Dynamic Analysis.<br /> Other versions use Frida and are automatically MobSFyed on the go.</p>
                        <p><h5> HTTPS Traffic Interception</h5>
                        <p>For Android version <strong>4.1 - 4.3</strong>, set Android VM proxy as <strong>{% if proxy_ip %} {{ proxy_ip }}{% else %} <i>&lt;Host IP&gt;</i>{% endif %}:{{proxy_port}}</strong><br/ >For Android versions <strong>4.4 - 10</strong>, global proxy settings are automatically applied.<br/>For more information, please refer Documentation.
                        </p>
                      </div>   
                     <div class="col-md-3">
                     <br/>
                     <br/>
                     <br/>
                     <p>
                        <button class="btn btn-info" role="button"  data-toggle="modal" data-target="#mmobsfy">MobSFy Android Runtime</button> <p>Android instance: <strong>{{ identifier }}</strong></p></div>
                      </p>
                    </div>
                     </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        
          <div class="col-md-12">
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title"><i class="fa fa-rocket"></i> Apps Avaiable for Dynamic Analysis</h3>
              </div>
              <div class="card-body">
                 <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                    <tr>
                        <th>APP</th>
                        <th>FILE NAME</th>
                        <th>PACKAGE</th>
                        <th>ACTION</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% if apps %}
                    {% for e in apps %}
                        <tr>
                            <td align="center">
                              <img id="app_icon" src="{% if e.ICON_FOUND %}/download/{{ e.MD5 }}-icon.png{% else %}{% static 'img/no_icon.png' %}{% endif %}"/>
                              <br/><strong>{{ e.APP_NAME }} - {{ e.VERSION_NAME }}</strong>
                            </td>
                            <td>
                                {{ e.FILE_NAME }}
                            </td>
                            <td>
                                {{ e.PACKAGE_NAME }}
                           </td>
                            <td align="center"> 
                              <a class="btn btn-success" onclick="dynamic_loader()" href="../android_dynamic/{{e.MD5}}"><i class="fab fa-android"></i> Start Dynamic Analysis</a>
                              <br/> <br/>
                                 <a class="btn btn-info" href="../dynamic_report/{{ e.MD5 }}"><i class="fa fa-mobile"></i> View Report </a>
                            </td>
                        </tr>
                    {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>

        </div>
       </div>
     </div>
    </div>
</div>

<!--Modal-->


<div class="modal" id="mmobsfy" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">MobSFy Android Runtime</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label>IP &amp; Port/Identifier</label>
                     <input id="identifier" type="text" class="form-control" value="{{ identifier }}">
                </div>
                <div class="form-group">
                  <label>Status</label>
                  <textarea id="stat" class="form-control" rows="10" placeholder="" disabled=""></textarea>
                </div>

              </form>
          </div>
           <div class="modal-footer">
            <button id="mobsfy" type="button" class="btn btn-primary">MobSFy!</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

<!--Loader-->
<div class="hidden loading">
<div class='uil-ring-css' style='transform:scale(0.79);'>
  <div></div>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<!-- DataTables -->
<script src="{% static "adminlte/plugins/datatables/jquery.dataTables.min.js" %} "></script>
<script src="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.js" %}"></script>
<script>
function dynamic_loader(){
    var loadingOverlay = document.querySelector('.loading');
    loadingOverlay.classList.remove('hidden');
}

//MobSFy AJAX
 $("#mobsfy").one( "click", function() {
        $('#stat').append("\nMobSFying Android Runtime\n");
        $.ajax({
                url : "../mobsfy/", 
                type : "POST",
                dataType: "json", 
                data : {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    identifier: $('#identifier').val() ,
                    },
                    success : function(json) {
                        if (json.status==="ok"){
                              $('#stat').append("\nSucessfully created MobSF Dynamic Analysis environment.");
                            if (json.android_version  < 5){
                              $('#stat').append("\n* Download & Install Xposed Framework.\n* Restart the device.");
                              $('#stat').append("\n* Enable all the Xposed modules.\n* Restart the device once more.");
                            } else{
                               $('#stat').append("\nMobSF agents and Frida server installed.");
                            }
                           
                        }
                        else if(json.status === "failed"){
                            $('#stat').append(json.message);
                        }
                         $('#stat').scrollTop($('#stat')[0].scrollHeight);
                    },
                    error : function(xhr, errmsg, err) {
                        $('#stat').append("\nERROR!!! \n\n"+ err);
                        $('#stat').scrollTop($('#stat')[0].scrollHeight);
                    }   
        });
    return false;  
}); 


//Datatables
  $(function () {
    // Datatable
    $('table').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": true,
      "responsive": true,
    });
  });

</script>
{% endblock %}
